<template>
	<view class="bigbox">
		<view class="detail" v-if="detailObj.goods_name">
			<!-- 轮播图 -->
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in detailObj.pics" :key="index">
					<image @click="preImage(index)" :src="item.pics_big_url" mode=""></image>
				</swiper-item>
			</swiper>
			<!-- title文字 -->
			<!-- 商品信息区域 -->
			<view class="infobox">
				<view class="price">
					￥{{ detailObj.goods_price }}
				</view>
				<view class="info">
					<view class="left">
						{{ detailObj.goods_name }}
					</view>
					<view class="right">
						<uni-icons type="star" size="20"></uni-icons>
						<text>收藏</text>
					</view>
				</view>
				<view class="pass">
					快递：免运费
				</view>
			</view>
			<view class="imgTitle">
				<rich-text :nodes="detailObj.goods_introduce"></rich-text>
			</view>
		</view>

		<!-- 底部导航 -->
		<uni-goods-nav class='example-body goods-carts' :fill="true" :options="options" :buttonGroup="buttonGroup"
			@click="onClick" @buttonClick="buttonClick" />
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		computed: {
			...mapState('cart', ['text', 'cart']),
			...mapGetters('cart', ['total'])
		},
		data() {
			return {
				goods_id: '',
				detailObj: {},
				options: [{
					icon: 'shop',
					text: '店铺'
				}, {
					icon: 'cart',
					text: '购物车',
					info: 0,
					infoBackgroundColor: '#ff0101',
					infoColor: "#fff"

				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],
				customButtonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #1E83FF, #0053B8)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #60F3FF, #088FEB)',
						color: '#fff'
					}
				],
				customButtonGroup1: [{
					text: '立即购买',
					backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
					color: '#fff'
				}]
			};
		},
		onLoad(options) {
			// 得到商品 id
			this.goods_id = options.goods_id
			// 根据商品 id 发送请求到服务器得到商品详情
			this.getDetailObj()
			this.options[1].info = this.total || 0
		},
		methods: {
			...mapMutations('cart', ['addToCart']),
			async getDetailObj() {
				let {
					data: res
				} = await uni.$http.get(`/api/public/v1/goods/detail?goods_id=${this.goods_id}`)
				// 保存数据
				this.detailObj = res.message
				console.log(res);
				// this.detailObj.goods_introduce = res.message.goods_introduce.replace(/<img /g,
				// 	'<img style:"display:block;" ')
				this.detailObj.goods_introduce = this.detailObj.goods_introduce.replace(/<img /g,
					'<img style="display: block;" ')
				this.detailObj.goods_introduce = this.detailObj.goods_introduce.replace(/.webp /g,
					'.jpg')
			},
			preImage(index) {
				let urls = this.detailObj.pics.map(item => {
					return item.pics_big_url
				})
				uni.previewImage({
					urls: urls,
					current: index
				})
			},
			// 点击左边
			onClick(e) {
				/* uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				}) */
				console.log(e);
				if (e.index === 1) {
					uni.switchTab({
						url: '../buycar/buycar'
					})
				}
			},
			// 点击右边
			buttonClick(e) {
				if (e.index === 0) {
					this.addToCart({
						goods_id: this.detailObj.goods_id,
						goods_name: this.detailObj.goods_name,
						goods_price: this.detailObj.goods_price,
						goods_small_logo: this.detailObj.goods_small_logo,
						goods_count: 1,
						goods_status: true
					})
				}
				// console.log(this.cart)

			}

		},
		watch: {
			'total': function(newv) {
				this.options[1].info = newv
			},
			immediate: true
		}
	}
</script>

<style lang="scss">
	.bigbox {
		padding-bottom: 50px;

		.swiper {
			height: 750rpx;

			image {
				width: 100%;
				height: 750rpx;
			}
		}

		.infobox {
			padding: 0 20rpx;

			.price {
				color: #c30d02;
				font-size: 24px;
				line-height: 100rpx;
			}

			.info {
				font-size: 14px;
				display: flex;
				justify-content: space-between;

				.left {
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					margin-right: 5px;
				}

				.right {
					width: 300rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border-left: 1px solid #ccc;
				}
			}

			.pass {
				font-size: 12px;
				line-height: 60rpx;
				color: #8b949f;
			}
		}

		.example-body {
			padding: 0px;
			/* #ifndef APP-NVUE */
			display: block;
			/* #endif */
		}

		.goods-carts {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			position: fixed;
			left: 0;
			right: 0;
			/* #ifdef H5 */
			left: var(--window-left);
			right: var(--window-right);
			/* #endif */
			bottom: 0;
		}
	}
</style>
